<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>二进制奶茶</title>
    </head>
    <body>
        <h1>二进制奶茶</h1>
        <h2>下单</h2>
        <div>
            <form action="#" th:action="@{/order}" th:object="${newOrderForm}" method="post">
                <p>
                    <label>折扣</label>
                    <input type="number" th:field="*{discount}" th:value="*{discount}" />
                </p>
                <p>
                <p th:if="${#fields.hasErrors('discount')}" th:errors="*{discount}" style="color:red">折扣错误</p>
                <label>饮料</label>
                <ul>
                        <li th:each="item : ${items}">
                            <input type="checkbox" th:field="*{itemIdList}" th:value="${item.id}" />
                            <label th:text="${item.name}">Java咖啡</label>
                            <label th:text="${item.size}">MEDIUM</label>
                            <label th:text="${item.price}">CNY 12.00</label>
                        </li>
                    </ul>
                </p>
                <p th:if="${#fields.hasErrors('itemIdList')}" th:errors="*{itemIdList}" style="color:red">点单错误</p>
                <p>
                    <input type="submit" value="提交"/>
                </p>
            </form>
        </div>
        <h2>订单</h2>
        <div>
            <table border="1px">
                <thead>
                    <tr>
                        <th>订单编号</th>
                        <th>总价</th>
                        <th>实付</th>
                        <th>状态</th>
                        <th>内容</th>
                    </tr>
                </thead>
                <tbody>
                    <tr th:each="order : ${orders}">
                        <td th:text="${order.id}">1</td>
                        <td th:text="${order.amount.totalAmount}">CNY 12.0</td>
                        <td th:text="${order.amount.payAmount}">CNY 12.0</td>
                        <td th:text="${order.status}">ORDERED</td>
                        <td>
                            <div th:each="item : ${order.items}">
                                <label th:text="${item.name}">Java咖啡</label>-<label th:text="${item.size}">MEDIUM</label><br/>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
</html>